<template>
  <div>
    <div class="border" @click="$router.push('/renaissance/'+item.id+'/'+item.comment_length)">
      <div v-if="item.type==1&&item.cover.length<=1&&item.cover.length>0" class="type1">
        <div class="nav">
          <div class="title">
            <p>{{item.title}}</p>
          </div>
          <div class="content" v-for="items in item.cover" :key="items.id">
            <img :src="items.url |filtersUrl" />
          </div>
        </div>
        <div class="footer">
          <span class="writer">{{item.user.nickname}}</span>
          <span class="follor-up">{{item.comment_length}}跟帖</span>
        </div>
      </div>
      <div v-if="item.type==1&&item.cover.length>=3" class="type2">
        <div class="nav1">
          <div class="title1">
            <p>{{item.title}}</p>
          </div>
          <div class="contents">
            <div class="content1" v-for="items in item.cover" :key="items.id">
              <img :src="items.url |filtersUrl" />
            </div>
          </div>
        </div>
        <div class="footer">
          <span class="writer">{{item.user.nickname}}</span>
          <span class="follor-up">{{item.comment_length}}跟帖</span>
        </div>
      </div>
      <div v-if="item.type==2&&item.cover.length>=3" class="type2">
        <div class="nav1">
          <div class="title1">
            <p>{{item.title}}</p>
          </div>
          <div class="contents">
            <div class="content1" v-for="items in item.cover" :key="items.id">
              <img :src="items.url |filtersUrl" />
            </div>
          </div>
        </div>
        <div class="footer">
          <span class="writer">{{item.user.nickname}}</span>
          <span class="follor-up">{{item.comment_length}}跟帖</span>
        </div>
      </div>
      <div v-if="item.type==2&&item.cover.length<=1&&item.cover.length>0" class="type3">
        <div class="nav1">
          <div class="title1">
            <p>{{item.title}}</p>
          </div>
          <div class="contents">
            <div class="content2">
              <!-- {{item.cover}} -->
              <video :src="item.content" :poster="item.cover[0].url |filtersUrl" controls muted></video>
            </div>
          </div>
        </div>
        <div class="footer">
          <span class="writer">{{item.user.nickname}}</span>
          <span class="follor-up">{{item.comment_length}}跟帖</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"]
  // filters: {
  //   filtersUrl |filtersUrl(url |filtersUrl) {
  //     const fil = /^http/;
  //     if (fil.test(url |filtersUrl)) {
  //       return url |filtersUrl;
  //     } else {
  //       return "http://liangwei.tech:300" + url |filtersUrl;
  //     }
  //   }
  // }
};
</script>

<style lang="less" scoped>
.border {
  .type1,
  .type2,
  .type3 {
    // display: flex;
    border-bottom: 1px solid #bbbbbb;
  }
  .nav,
  .contents {
    display: flex;
    // line-height: 80px;
  }

  .title {
    padding: 15px 7px 15px 7px;

    p {
      font-size: 14px;
    }
    flex: 1;
  }
  .title1 {
    padding: 15px 7px 15px 7px;

    p {
      font-size: 14px;
    }
    // flex: 1;
  }
  .content {
    margin: 20px 10px 0 0;

    height: 100px;
    width: 100px;
    // flex: 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      // justify-content: center;
      // text-align: right;
      // line-height: 80px;
    }
  }
  .content1 {
    // margin: 20px 10px 0 0;

    height: 70px;
    width: 30%;
    margin: 4px;
    flex-wrap: wrap;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // flex: 1;
      // text-align: right;
      // line-height: 80px;
    }
  }
  .content2 {
    // margin: 20px 10px 0 0;
    // text-align: center;
    height: 100%;
    width: 100%;
    // margin-left: 35px;

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // flex: 1;
      // text-align: right;
      // line-height: 80px;
    }
  }
  .footer {
    font-size: 12px;
    color: #ccc;
    padding: 10px;
    .writer {
      margin-right: 10px;
    }
  }
}
</style>